<template>
    <div>
        <!-- <el-button style="margin-top: 16px;margin-left: 16px;" @click="data.isOpen=true" type="primary">充值</el-button> -->
        <div class="body">
            <el-skeleton animated :rows="12" :loading="data.isFisrt">
                <div class="left">
                    <div v-if="data.data.length != 0" class="demo-collapse">
                        <el-collapse class="coll" accordion>
                            <el-collapse-item v-for="item in data.data" :key="item.id" :title="item.time"
                                :name="item.id">
                                <div>
                                    <div style="font-size: 20px;">
                                        <div>支付类型:<el-tag v-if="item.type === 0" style="position: relative;left: 5px;"
                                                type="success">充值</el-tag><el-tag v-else
                                                style="position: relative;left: 5px;" type="danger">支出</el-tag></div>
                                    </div>
                                    <div style="font-size: 20px;">
                                        <div v-if="item.type===0">充值金额:<el-tag type="success" style="position: relative;left: 5px;">￥{{ item.money }}</el-tag></div>
                                        <div v-else>支付金额:<el-tag type="danger" style="position: relative;left: 5px;">￥{{ item.money }}</el-tag></div>
                                    </div>
                                    <div style="font-size: 20px;">
                                        <div>余额:<el-tag type="success" style="position: relative;left: 5px;">￥{{ item.balance }}</el-tag></div>
                                    </div>
                                </div>
                            </el-collapse-item>
                        </el-collapse>
                    </div>
                    <div v-else>
                        <el-collapse class="coll" accordion>
                            <el-collapse-item title="暂无数据" name="666">
                                <div>
                                    无无无无无无
                                </div>
                            </el-collapse-item>
                        </el-collapse>
                    </div>
                </div>
                <div class="right">
                    <el-card style="width: 600px;height: 170px;background: #78DF7D;">
                        <p style="font-size: 30px;position: relative;left: 20px;top: 5px;color: white;">余额</p>
                        <p style="color: white;font-size: 46px;position: relative;">￥{{ data.balance }}</p>
                        <p style="color: white;font-size: 22px;position: relative;left: 380px;bottom: 110px;">累计充值￥{{
                            data.Accumulatedrecharge }}</p>
                        <p style="color: white;font-size: 22px;position: relative;left: 380px;bottom: 90px;">累计消费￥{{
                            data.Accumulatedconsumption }}</p>
                    </el-card>
                    <div class="detail">
                        <el-card shadow="hover" @click="d1" id="d1">
                            ￥30
                        </el-card>
                        <el-card shadow="hover" @click="d2" id="d2">
                            ￥68
                        </el-card>
                        <el-card shadow="hover" @click="d3" id="d3">
                            ￥98
                        </el-card>
                        <el-card shadow="hover" @click="d4" id="d4">
                            ￥198
                        </el-card>
                        <el-card shadow="hover" @click="d5" id="d5">
                            ￥328
                        </el-card>
                        <el-card shadow="hover" @click="d6" id="d6">
                            ￥648
                        </el-card>
                    </div>
                </div>
            </el-skeleton>
        </div>
        <el-dialog v-model="data.centerDialogVisible" title="是否充值" width="500">

            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="data.centerDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="Recharge">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { GetUserRechargeByid, VIPRecharge } from '@/api/vip';
import type { dictionary_Dto } from '@/Dto/Request/dic/dictionary_Dto';
import { ElLoading } from 'element-plus';
import { onMounted, reactive } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const data = reactive<dictionary_Dto>({
    isFisrt: true,
    data: [],
    id: '',
    balance: '',
    Accumulatedconsumption: 0,
    Accumulatedrecharge: 0,
    money: 0,
    centerDialogVisible: false
})
const d1 = () => {
    data.centerDialogVisible = true;
    data.money = 30
    document.getElementById('d1').style.background = "#78DF7D"
    document.getElementById('d2').style.background = "white"
    document.getElementById('d3').style.background = "white"
    document.getElementById('d4').style.background = "white"
    document.getElementById('d5').style.background = "white"
    document.getElementById('d6').style.background = "white"
}
const d2 = () => {
    data.centerDialogVisible = true;
    data.money = 68
    document.getElementById('d1').style.background = "white"
    document.getElementById('d2').style.background = "#78DF7D"
    document.getElementById('d3').style.background = "white"
    document.getElementById('d4').style.background = "white"
    document.getElementById('d5').style.background = "white"
    document.getElementById('d6').style.background = "white"
}
const d3 = () => {
    data.centerDialogVisible = true;
    data.money = 98
    document.getElementById('d1').style.background = "white"
    document.getElementById('d2').style.background = "white"
    document.getElementById('d3').style.background = "#78DF7D"
    document.getElementById('d4').style.background = "white"
    document.getElementById('d5').style.background = "white"
    document.getElementById('d6').style.background = "white"
}
const d4 = () => {
    data.centerDialogVisible = true;
    data.money = 198
    document.getElementById('d1').style.background = "white"
    document.getElementById('d2').style.background = "white"
    document.getElementById('d3').style.background = "white"
    document.getElementById('d4').style.background = "#78DF7D"
    document.getElementById('d5').style.background = "white"
    document.getElementById('d6').style.background = "white"
}
const d5 = () => {
    data.centerDialogVisible = true;
    data.money = 328
    document.getElementById('d1').style.background = "white"
    document.getElementById('d2').style.background = "white"
    document.getElementById('d3').style.background = "white"
    document.getElementById('d4').style.background = "white"
    document.getElementById('d5').style.background = "#78DF7D"
    document.getElementById('d6').style.background = "white"
}
const d6 = () => {
    data.centerDialogVisible = true;
    data.money = 648
    document.getElementById('d1').style.background = "white"
    document.getElementById('d2').style.background = "white"
    document.getElementById('d3').style.background = "white"
    document.getElementById('d4').style.background = "white"
    document.getElementById('d5').style.background = "white"
    document.getElementById('d6').style.background = "#78DF7D"
}
const methods = {
    async bind() {
        data.isFisrt = true;
        const result = await GetUserRechargeByid({ id: data.id })
        data.data = result.data.data;
        data.isFisrt = false;
        data.Accumulatedconsumption = result.data.accumulatedconsumption;
        data.Accumulatedrecharge = result.data.accumulatedrecharge;
        data.balance = result.data.balance
        console.log(result)
    }
}
const Recharge = async () => {
    const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    const res = await VIPRecharge({
        cid: data.id,
        money: data.money
    })
    loading.close()
    methods.bind();
    data.centerDialogVisible = false;
}
onMounted(async () => {
    data.id = route.params.id,
        await methods.bind();
    data.isFisrt = false;
})
</script>

<style scoped>
.btn {
    width: 100%;
}

.left {
    width: 45%;
}

.right {
    flex: 1;
    padding-left: 24px;
}

.body {
    padding: 16px;
    margin: 16px;
    display: flex;
}

.detail {
    margin-top: 20px;
}

/* .coll {
    width: 45%;
} */
#d1 {
    width: 185px;
    text-align: center;
}

#d2 {
    width: 185px;
    position: relative;
    left: 205px;
    bottom: 66px;
    text-align: center;
}

#d3 {
    width: 185px;
    position: relative;
    left: 410px;
    bottom: 132px;
    text-align: center;
}

#d4 {
    width: 185px;
    position: relative;
    bottom: 122px;
    text-align: center;
}

#d5 {
    width: 185px;
    position: relative;
    left: 205px;
    bottom: 188px;
    text-align: center;
}

#d6 {
    width: 185px;
    position: relative;
    bottom: 255px;
    left: 410px;
    text-align: center;
}
</style>